import { useState } from 'react'
import classnames from 'classnames'
import { TitleTextAlignEnum } from '@/enums'
import { useDebouncedCallback } from '@mantine/hooks'
import { Popover, Button, FloatingPosition, SegmentedControl, TextInput, Radio, Group } from '@mantine/core'
import { StringOrNumber } from '@/types'


interface PopoverInputProps {
  btnCls?: string,
  defaultValue?: StringOrNumber
  position?: FloatingPosition,
  onChange?: (value: StringOrNumber) => void
}

interface ActionOpts {
  event: 'radio' | 'input',
  data?: string
}

const InputSelectOpts = [
  { label: '默认', value: TitleTextAlignEnum.Auto },
  { label: '%', value: '%' },
  { label: 'px', value: 'px' }
];


const DefaultRadioOpts = [
  { label: 'auto', value: 'auto' },
  { label: 'center', value: 'center' },
  { label: 'left', value: 'left' },
  { label: 'right', value: 'right' }
]

export default function PopoverInput({
  btnCls,
  onChange,
  defaultValue = TitleTextAlignEnum.Auto,
  position = 'bottom'
}: PopoverInputProps) {
  const [values, setValues] = useState<StringOrNumber>(defaultValue);
  const [segValue, setSegValue] = useState<string>(TitleTextAlignEnum.Auto);

  const defaultSelectNode = DefaultRadioOpts.map((item, index) => {
    return (
      <Radio.Card
        className='p-1 w-[70px]'
        radius="sm"
        key={index}
        value={item.value}
      >
        <Group className='flex items-center gap-2 h-[16px]' wrap="nowrap" align="flex-start">
          <Radio.Indicator size='xs' />
          <div>
            <span className='text-[12px]'>{item.label}</span>
          </div>
        </Group>
      </Radio.Card>
    )
  })

  const debounce = useDebouncedCallback((value) => {
    onAction({ event: 'input', data: value })
  }, 500)

  function onAction({ event, data }: ActionOpts) {
    let output = data || defaultValue;

    if (event == 'radio') {
      data && setSegValue(data);
    }

    if (event == 'input') {
      output = `${data}${segValue}`;
    }

    setValues(output);
    if (typeof onChange === 'function') {
      onChange(output)
    }
  }

  function renderInner() {
    const isRadio = DefaultRadioOpts.map(item => item.value);
    if (isRadio.includes(segValue)) {
      return (
        <Radio.Group
          value={segValue}
          onChange={(e) => onAction({ event: 'radio', data: e })}
        >
          <div className='flex flex-wrap justify-around'>
            {defaultSelectNode}
          </div>
        </Radio.Group>
      )
    }

    return (
      <TextInput
        size="xs"
        onChange={(e) => debounce(e.target.value)}
        rightSection={
          <span className='text-[12px] font-bold h-full w-full flex items-center justify-center bg-gray-100'>
            {segValue}
          </span>
        }
      />
    )
  }

  return (
    <Popover width={200} trapFocus withArrow position={position} >
      <Popover.Target>
        <Button
          variant="light"
          className={classnames('border-0 bg-[transparent] hover:bg-[transparent]', btnCls)}
          size='xs'>{values}</Button>
      </Popover.Target>
      <Popover.Dropdown>
        <SegmentedControl
          size='xs'
          className='mb-2 w-full'
          data={InputSelectOpts}
          onChange={(e) => setSegValue(e)}
        />
        {renderInner()}
      </Popover.Dropdown>
    </Popover>
  )
}